import { Line } from '@ant-design/charts';
import { Radio } from 'antd';
import { useEffect, useState } from 'react';

import {
  questionsGetCountsList,
  repairsGetCountsList,
} from '../../apis/index/index';
import './index.css';


const Chart = () => {
  //数组
  const [data, setDate] = useState<any>([]);
  const RadioonChange = (v: any) => getDate(v.target.value);
  const getDate = (type = 1) => {
    const params: any = {};
    if (type === 1) params.days = 30;
    if (type === 2) params.months = new Date().getMonth() + 1;
    if (type === 3) params.years = new Date().getFullYear();
    Promise.all([
      questionsGetCountsList(params),
      repairsGetCountsList(params),
    ]).then(([{ data: questions }, { data: repairs }]: any) => {
      questions = questions.map((item: any) => ({
        ...item,
        category: '投诉总数',
      }));
      repairs = repairs.map((item: any) => ({
        ...item,
        category: '投修总数',
      }));
      if (type === 1) {
        questions.reverse();
        repairs.reverse();
      }
      if (type === 2) {
        questions.reverse();
        repairs.reverse();
      }
      setDate([...questions, ...repairs]);
    });
  };
  useEffect(getDate, []);
  const config = {
    data,
    height: 300,
    xField: 'label',
    yField: 'counts',
    seriesField: 'category',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };

  return (
    <>
      <div className="charts_div_name">
        <Radio.Group
          options={[
            { label: '最近30天', value: 1 },
            { label: '最近半年', value: 2 },
            { label: '本年', value: 3 },
          ]}
          onChange={RadioonChange}
          defaultValue={1}
          optionType="button"
          buttonStyle="solid"
          className="charts_Radio"
        />
        <h2 style={{ fontWeight: '400' }}>数据展示</h2>
        <Line {...config} />
      </div>
    </>
  );
};
export default Chart;
